<template>
  <view class="withdraw_view">
    <view class="header">
      <view class="assets">
        <view class="assetsTitle">可提现</view>
        <view class="assetsMoney">账户余额：<text>{{(withdrawInfo.amount || withdrawInfo.amount == 0) ? '￥' + withdrawInfo.amount : '--'}}</text></view>
      </view>
      <view class="withdrawal need_scroll_top_view">
        <input type="number" placeholder-class="place" placeholder="请输入提现金额" v-model="data.applyAmount" @input="amountInput" @blur="backFixationTop()">
        <text @click="withdrawAll">全部提现</text>
      </view>
      <view class="line"></view>
    </view>
    <view class="content">
      <view class="addBankCard">
        <view class="select-bank-wrap" @click="toSelectBankCard">
          <view class="pick-value-select bank_select_wrap" v-if="bankInfo && bankInfo.id">
            <image :src="bankInfo.icon" mode="" class="card_img"></image>
            {{bankInfo.bankName}}
          </view>
          <view class="pick-value" v-if="!bankInfo.id">
            选择银行卡
          </view>
        </view>
        <!-- <picker @change="bindCardPickerChange" :value="cardIndex" :range="cardList" range-key="bankName">
          <view class="select-bank-wrap">
            <view class="pick-value-select bank_select_wrap" v-if="cardList && cardList.length > 0 && cardList[cardIndex].bankId">
              <image :src="cardList[cardIndex].icon" mode="" class="card_img"></image>
              {{cardList[cardIndex].bankName}}
            </view>
            <view class="pick-value" v-if="cardList && cardList.length > 0 && !cardList[cardIndex].bankId">选择银行卡</view>
            <view class="pick-value" @click.stop="openTipModal" style="text-align: right;" :style="{width: cardList && cardList.length > 0 ? '' : '100%'}">添加银行卡</view> 
          </view>
          
        </picker> -->
        <view class="arrow"></view>
      </view>
      <!-- <view class="line"></view>
      <view class="drawDill">
        <text>开具发票</text>
        <switch  @change="switchChange" color="#4CD964" :checked="data.isNeedInvoice"/>
      </view> -->
      <view class="line"></view>
      <view class="tip-info" v-if="!data.isNeedInvoice">
        <view class="">
          1、提现成功后，我们将在1-2个工作日内到账；
        </view>
        <view class="">
          2、提现的金额与奖励的实际产生金额会存在一个差额，差额部分为税务代开的服务费；
        </view>
        <view class="">
          3、提现时，您可以采用自开发票的方式进行提现，该提现方式，平台不会扣除税点服务费，并退还至您的账户，并在提现时一并提现到账
        </view>
      </view>
      <!-- 开票信息 -->
      
      <!-- 实时到帐 -->
      <!-- <view v-show="data.invoiceType == 0 && !data.isNeedInvoice">
        <view class="drawDill">
          <text>实时到帐</text>
          <view id="switch" v-if="data.applyAmount && withdrawInfo.feeRate">
            <text>
              ￥ {{data.applyAmount * (1 - withdrawInfo.feeRate) | toFixed(2)}}
            </text>
          </view>
        </view>
        <view class="line"></view>
        <view class="service">
          <text>扣除{{withdrawInfo.feeRate || '--'}}的手续费，作为第三方服务的手续费</text>
        </view>
      </view> -->
      <block v-if="data.isNeedInvoice">
        <view>
          <view class="addBankCard">
            <text class="bankCard">发票类型</text>
            <view class="uni-list-cell-db">
              <picker @change="bindInvoiceTypePickerChange" :value="invoiceIndex" :range="invoiceArray" range-key="name">
                <view class="pick-value-select" v-if="invoiceArray && invoiceArray.length > 0">{{invoiceArray[invoiceIndex].name}}</view>
                <view class="pick-value" v-else>请选择发票类型</view>
              </picker>
            </view>
            <view class="arrow"></view>
          </view>
          <view class="line"></view>
        </view>
        <view class="rate-info" v-if="data.applyAmount && data.applyAmount > 0">
          <text>需向平台提供发票面值为:</text>
          <text class="rate-fee">￥{{data.applyAmount | toFixed(2)}}</text>
          <text>的发票</text>
        </view>
        
        <!-- 纸质发票详细地址 -->
        <view class="paperElectronics" v-show="data.invoiceType == 2">
          <view class="paperTitle">请按照如下的信息进行开票与邮寄</view>
          <view class="paperTitle">
            开票须知：
          </view>
          <view class="paperAddress">
            <view class="">
              1、开票金额 = 提现金额
            </view>
            <view class="">
              2、开票类型：现代咨询服务费（税务要求必须此类型）
            </view>
            <view class="">
              3、开票抬头：
              <view class="invoice-title_wrap">
                <view class="">
                  <text class="label">公司名称：</text>宁波每购网络科技有限公司
                </view>
                <view class="">
                  <text class="label">税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</text>
                  91330205MA2GRXCN73
                </view>
                <view class="">
                  <text class="label">银行账号：</text>
                  1001120809000109732
                </view>
                <view class="">
                  <text class="label">支行信息：</text>工行上海市古美路支行
                </view>
                <view class="">
                  <text class="label">邮寄地址：</text>上海市徐汇区浦北路9号中星城17F
                </view>
                <view class="">
                  <text class="label">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</text>
                  021-51099995
                </view>
                <view class="">
                  <text class="label">收&nbsp;&nbsp;件&nbsp;&nbsp;人：</text>
                  社区电商
                </view>
              </view>
            </view>
            <!-- <view>收票人：<text>社区电商</text></view>
            <view>联系方式：<text>13112345678</text></view>
            <view>邮寄方式：<text>上海市大渡河路柳州路800号</text></view> -->
          </view>
          <view class="postal-number">
            <view class="title">邮递单号：</view>
            <input placeholder="请填写邮递单号" placeholder-class="input-placeholder" v-model="data.invoiceRemark" @blur="backFixationTop()"/>
          </view>
          <!-- <view class="logistics">请填写邮寄的物流单号</view> -->
        </view>
        <!-- 电子发票邮箱 -->
        <view class="paperElectronics" v-show="data.invoiceType == 1">
          <view class="paperTitle">请根据下方的信息开票并发送您的电子发票</view>
          <view class="paperTitle">
            电子发票开票须知：
          </view>
          <view class="emailDiv">
            <view class="paperAddress">
              <view class="">
                1、开票金额 = 提现金额
              </view>
              <view class="">
                2、开票类型：现代咨询服务费（税务要求必须此类型）
              </view>
              <view class="">
                3、开票抬头：
                <view class="invoice-title_wrap">
                  <view class="">
                    <text class="label">公司名称：</text>宁波每购网络科技有限公司
                  </view>
                  <view class="">
                    <text class="label">税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</text>91330205MA2GRXCN73
                  </view>
                  <view class="">
                    <text class="label">银行账号：</text>1001120809000109732
                  </view>
                  <view class="">
                    <text class="label">支行信息：</text>工行上海市古美路支行
                  </view>
                </view>
                
              </view>
              <view class="">
                <view class="">
                  4、电子发票发送地址
                </view>
                <view class="email">haokaidian@163.com</view>
              </view>
            </view>
            <!-- <text class="sendEmail">发送邮件</text> -->
            <view class="postal-number">
              <view class="title">邮箱：</view>
              <input placeholder="请填写您发送电子发票的邮箱" placeholder-class="input-placeholder" v-model="data.invoiceRemark" @blur="backFixationTop()"/>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 选取发票后需要填写的内容 -->
    <uni-popup ref="popup" type="center" :show="noticeModal.show" class="noticeModal" :maskClick="false">
      <view class="notice-title">
        提现明细
      </view>
      <view class="notice-content">
        <view class="notice-content-account">
          <view class="label">
            提现金额
          </view>
          <view class="account">
            ￥{{data.applyAmount | toFixed(2)}}
          </view>
        </view>
        <view class="notice-content-account">
          <view class="label">
            平台代扣费
          </view>
          <view class="account">
            ￥{{(data.applyAmount * (withdrawInfo.feeRate / (1 - withdrawInfo.feeRate))) | toFixed(2)}}
          </view>
        </view>
        <view class="notice-content-account">
          <view class="label">
            提现金本金
          </view>
          <view class="account">
            ￥{{(data.applyAmount / (1 - withdrawInfo.feeRate)) | toFixed(2)}}
          </view>
        </view>
        <view class="tip">
          用于税务代开服务
        </view>
        <view class="other-tip">
          若您需要平台退还代扣费，请您向平台提供面值为:￥<text style="font-weight: bold;color: blue;" :decode="true"> &nbsp;&nbsp;&nbsp;{{(data.applyAmount * (withdrawInfo.feeRate / (1 - withdrawInfo.feeRate))) | toFixed(2)}} &nbsp;&nbsp;&nbsp;</text>的增值税专用发票，并通过邮件或邮寄的方式向进行提供。
        </view>
      </view>
      <view class="footer">
        <button type="primary" class="paltform-btn" @click="confirmIsNeedInvoice(1)">平台代扣</button>
        <button type="primary" class="invoice-btn" @click="confirmIsNeedInvoice(2)">我要开票</button>
      </view>
    </uni-popup>
    <!--  -->
    <!-- 点击添加银行卡的时候需要弹出的提示弾层 -->
    <!-- <uni-popup ref="popup" type="center" :show="tipModal.show" class="tipModal" :maskClick="false">
      <view class="tip-title">
        银行要求
      </view>
      <view class="tip-content">
        <view class="tip">
          1、若该商户为企业商户，则添加银行卡时，账户名称系统直接根据营业执照名字拉出，并无法修改，其他信息由商户自己输入;
        </view>
        <view class="tip">
          2、若该商户为个体商户，则添加银行卡时，账户名称系统直接根据营业执照法人姓名直接带出，并无法修改，其他信息由商户自己输入。
        </view>
      </view>
      <view class="footer">
        <button type="primary" class="confirm-btn" @click="toAddBank">我知道了</button>
      </view>
    </uni-popup> -->
    <!--  -->
    <!-- 弹出层 -->
    <uni-popup ref="popup" type="center" :show="modal.show" :maskClick="modal.maskClick">
      <view class="popupF">
        <view class="popupTitle">提现要求</view>
        <view class="popupTips">非常抱歉，提现需补充完善以下所有信息，补充完善完成前，无法发起提现</view>
        <!-- <view class="popupTips">尊敬的客户，平台为个人加盟的客户提供2个月的特殊关照期，超过该期限内，此类客户将在提现时将会受到限制，请尽快完成企业的认证。</view>
        <view class="popupTime">关照期剩余：<text>{{applyInfo.withdrawGreenDays}} </text>天</view> -->
        <view class="popupContent">
          <!-- 营业执照 -->
          <!-- bizLicense: null, // 营业执照，null表示无，需要补充资质
          bizLicenseStatus: null, // 营业执照状态：0-待审核，1-审核通过，2-审核失败，3-审核驳回 -->
          <!-- 成功 -->
          <view class="popupImage" v-if="applyInfo.bizLicense && applyInfo.bizLicenseStatus == 1" >
            <image :src="$store.state.imgBaseUrl + '/withdraw/success.png'"></image>
            <view>营业执照</view>
          </view>
          <!-- 审核中 -->
          <view class="popupImage" v-else-if="applyInfo.bizLicense && applyInfo.bizLicenseStatus == 0" >
            <image :src="$store.state.imgBaseUrl + '/withdraw/loading.png'"></image>
            <view>营业执照</view>
          </view>
          <!-- 需要重新上传 -->
          <view class="popupImage" v-else>
            <image :src="$store.state.imgBaseUrl + '/withdraw/fail.png'"></image>
            <view>营业执照</view>
          </view>
          <!--  -->
          <!-- 委托个人打款协议 -->
          <!-- tfStatus: null, // 打款记录审核状态：0-待审核，1-审核通过，2-审核失败，3-审核驳回
          tfProxyFile: null, // 委托个人打款协议id，null表示没有上传
          tfProxyStatus: null, // 委托个人打款协议状态：0-需要，1-不需要，2-有效，3-无效 -->
          <!-- <block v-if="applyInfo.tfProxyStatus != 1">
            
            <view class="popupImage" v-if="applyInfo.tfProxyFile && applyInfo.tfProxyStatus == 2 && applyInfo.tfStatus == 1">
              <image :src="$store.state.imgBaseUrl + '/withdraw/success.png'"></image>
              <view>委托个人打款协议</view>
            </view>
            
            <view class="popupImage" v-else-if="applyInfo.tfProxyFile && applyInfo.tfStatus == 0">
              <image :src="$store.state.imgBaseUrl + '/withdraw/loading.png'"></image>
              <view>委托个人打款协议</view>
            </view>
            
            <view class="popupImage" v-else>
              <image :src="$store.state.imgBaseUrl + '/withdraw/fail.png'"></image>
              <view>委托个人打款协议</view>
            </view>
          </block> -->
          <!-- <block v-if="applyInfo.tfProxyStatus != 1 && !applyInfo.tfProxyFile">
            <view class="popupImage">
              <image :src="$store.state.imgBaseUrl + '/withdraw/fail.png'"></image>
              <view>委托个人打款协议</view>
            </view>
          </block> -->
          <!--  -->
          <!-- ctId不存在，合同和委托个人签合同都不需要 -->
          <!-- ctId: null, // 合同记录id -->
          <block v-if="applyInfo.ctId">   
            <!--  委托个人签署合作协议 -->
            <!--
              ctProxyStatus: null, // 委托个人签合同协议状态：0-需要，1-不需要，2-有效，3-无效
              ctProxyFile: null  // 委托个人签合同协议id，null表示没有上传
            -->
           
            <block v-if="applyInfo.ctProxyStatus != 1">
              <!-- 成功 -->
              <view class="popupImage" v-if="applyInfo.ctProxyStatus == 2 && applyInfo.ctProxyFile">
                <image :src="$store.state.imgBaseUrl + '/withdraw/success.png'"></image>
                <view>介绍信</view>
              </view>
              <!-- 审核中 -->
              <view class="popupImage" v-else-if="applyInfo.ctProxyStatus == 0 && applyInfo.ctProxyFile">
                <image :src="$store.state.imgBaseUrl + '/withdraw/loading.png'"></image>
                <view>介绍信</view>
              </view>
              <!-- 失败 -->
              <view class="popupImage" v-else>
                <image :src="$store.state.imgBaseUrl + '/withdraw/fail.png'"></image>
                <view>介绍信</view>
              </view>
            </block>
            <!-- 合同 -->
            <block>           
              <!-- ctStatus: null, // 合同接收状态：0-未收到，1-收到
              ctAuditStatus: null, //合同审核状态：0-待审核，1-审核通过，2-审核驳回 -->
              <!-- 成功 -->
              <view class="popupImage" v-if="applyInfo.ctStatus == 1 && applyInfo.ctAuditStatus == 1">
                <image :src="$store.state.imgBaseUrl + '/withdraw/success.png'"></image>
                <view>合同</view>
              </view>
              <!-- 审核中 -->
              <view class="popupImage" v-else-if="applyInfo.ctStatus == 1 && applyInfo.ctAuditStatus == 0">
                <image :src="$store.state.imgBaseUrl + '/withdraw/loading.png'"></image>
                <view>合同</view>
              </view>
              <!-- 失败 -->
              <view class="popupImage" v-else>
                <image :src="$store.state.imgBaseUrl + '/withdraw/fail.png'"></image>
                <view>合同</view>
              </view>
            </block>
            <!--  -->  
          </block>
        </view>
        <view class="popupFoot">
          <!-- <view class="popupPass popupComBtn" @click="modal.show = false">
            <text>跳过</text>
          </view> -->
          <view class="popupBtn popupComBtn" @click="toComplete" style="width: 98%;">
            <text>去完善</text>
          </view>
        </view>
        
      </view>
    </uni-popup>
    <view class="uni-padding-wrap uni-common-mt">
      <!-- <button type="primary" class="othner-btn" @click="selectIsNeedInvoice">{{data.isNeedInvoice ? '平台代扣' : '去开发票'}}</button> -->
      <button type="primary" @click="submitWithdraw" class="withdrawBtn" style="width: 90%;">申请提现</button>
    </view>
  </view>
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import { getWithdrawInfoApi, withdrawApi, getUserUpgradeApplyApi } from '@/service/withdraw/withdraw.service.js'
import { BankCardFindBankList } from '@/service/user/user.service.js'
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue'
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
export default{
  components: { uniPopup },
  mixins: [scrollToTargetPosition],
  data () {
    return {
      noticeModal: {
        show: false
      },
      tipModal: {
        show: false
      },
      withdrawInfo: {
        amount: '', // 余额
        feeRate: '' // 手续费率
      },
      invoiceArray: [{
        type: 1,
        name: '电子发票'
      }, {
        type: 2,
        name: '纸质发票'
      }],
      bankInfo: {
        id: null,
        icon: null, // 图标
        bankName: null // 银行卡名称
      },
      invoiceIndex: 0,
      selectInvoice: false,
      data: {
        isNeedInvoice: true, // 是否需要开具发票
        bankCardId: null, // 提现银行卡ID
        applyAmount: '', // 提现金额
        invoiceType: 1, // 发票类型： 0：无 1：电子发票 2：纸质发票
        invoiceRemark: '', // 发票备注：提供者邮箱或纸质发票邮递单号
      },
      cardList: [], // 用户银行卡列表
      cardIndex: 0,
      selectCard: false,
      modal: {
        show: false,
        maskClick: false
      },
      applyInfo: {
        qfStatus: null, // 资质记录状态
        bizLicense: null, // 营业执照，null表示无，需要补充资质
        bizLicenseStatus: null, // 营业执照状态：0-待审核，1-审核通过，2-审核失败，3-审核驳回
        tfId: null, // 打款记录id
        tfStatus: null, // 打款记录审核状态：0-待审核，1-审核通过，2-审核失败，3-审核驳回
        tfProxyStatus: null, // 委托个人打款协议状态：0-需要，1-不需要，2-有效，3-无效
        tfProxyFile: null, // 委托个人打款协议id，null表示没有上传
        ctId: null, // 合同记录id
        ctStatus: null, // 合同接收状态：0-未收到，1-收到
        ctAuditStatus: null, //合同审核状态：0-待审核，1-审核通过，2-审核驳回
        ctProxyStatus: null, // 委托个人签合同协议状态：0-需要，1-不需要，2-有效，3-无效
        ctProxyFile: null // 委托个人签合同协议id，null表示没有上传
      }
    }
  },
  mounted() {
    // this.modal.show = true;
  },
  onLoad (option) {
    if (option.hasSelected) {
      let bankInfo = uni.getStorageSync('selectedBank');
      if (bankInfo) {
        this.bankInfo = bankInfo;
        uni.removeStorageSync('selectedBank');
      }
    }
  },
  onShow() {
    let withdrawInfo = uni.getStorageSync('withdrawInfo');
    if (withdrawInfo) {
      this.data = withdrawInfo;
      if (this.bankInfo.id) {
        this.data.bankCardId = this.bankInfo.id;
      }
      uni.removeStorageSync('withdrawInfo');
    }
    this.getWithdrawInfo();
    this.getCardList();
    this.getUserUpgradeApplyInfo();
  },
  methods: {
    toSelectBankCard () { // 去选择银行卡
      uni.setStorageSync('withdrawInfo', Object.assign({}, this.data));
      uni.navigateTo({
        url: '/pages/user/bankCardList?operationType=1'
      })
    },
    selectIsNeedInvoice () {
      let flag = !this.data.isNeedInvoice;
      if (flag) {
        Number(this.data.applyAmount) ? this.noticeModal.show = true : uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        });
        Number(this.data.applyAmount) ? this.data.isNeedInvoice = true : this.data.isNeedInvoice = false
      } else {
        this.data.isNeedInvoice = false;
      }
    },
    confirmIsNeedInvoice (type) { // type： 1：平台代扣  2：开发票
      this.noticeModal.show = false;
      
      if (type == 1) {
        this.data.isNeedInvoice = false;
        this.data.invoiceType = 0;
      } else {
        this.data.invoiceType = 1;
        this.data.isNeedInvoice = true;
      }
    },
    toComplete () {
      uni.navigateTo({
        url: '/pages/cashWithDrawal/information'
      })
    },
    openTipModal () {
      this.tipModal.show = true;
    },
    toAddBank () {
      this.tipModal.show = false;
      uni.navigateTo({
        url: '/pages/user/addBankCard?operationType=1'
      })
    },
    getUserUpgradeApplyInfo () {
      getUserUpgradeApplyApi({}, res => {
        if (res.status == 0) {
          this.applyInfo = res.data;
          // 营业执照 applyInfo.bizLicense && applyInfo.bizLicenseStatus == 1
          // 委托个人打款协议 (applyInfo.tfProxyFile && applyInfo.tfProxyStatus == 2 && applyInfo.tfStatus == 1) || applyInfo.tfProxyStatus == 1
          // !applyInfo.ctId || 
          // 委托个人签署合同协议 applyInfo.ctId && (applyInfo.ctProxyStatus == 1 || (applyInfo.ctProxyStatus == 2 && applyInfo.ctProxyFile))
          // 合同 applyInfo.ctId && applyInfo.ctStatus == 1 && applyInfo.ctAuditStatus == 1
          if ((this.applyInfo.bizLicense && this.applyInfo.bizLicenseStatus == 1) && (!this.applyInfo.ctId || (this.applyInfo.ctId && (this.applyInfo.ctProxyStatus == 1 || (this.applyInfo.ctProxyStatus == 2 && this.applyInfo.ctProxyFile)) && this.applyInfo.ctStatus == 1 && this.applyInfo.ctAuditStatus == 1))) {
            // 
            // this.modal.show = true;
          } else {
            this.modal.show = true;
            this.modal.maskClick = false;
          }
        }
      }, null, {showErrorMsg: true});
    },
    withdrawAll () { // 全部提现
      this.data.applyAmount = this.withdrawInfo.amount;
    },
    amountInput () {
      if (this.data.applyAmount > this.withdrawInfo.amount) {
        this.data.applyAmount = this.withdrawInfo.amount;
      }
    },
    submitWithdraw () { // 提交提现信息
      let rule = [
        {name:'applyAmount', checkType : 'notnull', checkRule: '',  errorMsg:'请填写提现金额'},
        {name:'bankCardId', checkType : 'notnull', checkRule:'',  errorMsg:'请选择银行卡'}
      ];
      
      if (this.data.isNeedInvoice && !this.data.invoiceType) {
        rule.push({name:'invoiceType', checkType : 'notnull', checkRule:'',  errorMsg: '请选择发票类型'});
      }
      if (this.data.isNeedInvoice && this.data.invoiceType !== 0) {
        rule.push({name:'invoiceRemark', checkType : 'notnull', checkRule:'',  errorMsg: this.data.invoiceType == 1 ? '请填写发送电子发票的邮箱' : '请填写纸质发票邮递单号'});
        rule.push({name:'invoiceRemark', checkType : this.data.invoiceType == 1 ? 'email' : 'notnull', checkRule:'',  errorMsg: this.data.invoiceType == 1 ? '请填写正确的邮箱' : '请填写纸质发票邮递单号'});
      }
      var checkRes = formValid.check(this.data, rule);
      if (checkRes) {
        uni.showLoading({mask: true})
        let params = Object.assign({}, this.data);
        delete params.isNeedInvoice;
        withdrawApi(params, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '提现申请成功！',
              icon: 'none',
              mask: true,
              success: () => {
                setTimeout(function () {
                  uni.redirectTo({
                    url: '/pages/property/myProperty'
                  });
                }, 2000);
              }
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    },
    getCardList () { // 获取银行卡列表
      BankCardFindBankList({
      }, (res) => {
        if (res.status == 0) {
          this.cardList = res.data;
          // if (this.cardList && this.cardList.length > 0) {
          //   this.cardList.unshift({
          //     bankId: null,
          //     bankName: '请选择银行卡'
          //   })
          // }
        }
      })
    },
    getWithdrawInfo () { // 获取提现信息
      getWithdrawInfoApi({}, res => {
        if (res.status == 0) {
          this.withdrawInfo = res.data;
        }
      }, null, {showErrorMsg: true});
    },
    bindCardPickerChange (e) { // 银行卡
      this.selectCard = true;
      this.data.bankCardId = this.cardList[e.target.value].id;
      this.cardIndex = e.target.value;
    },
    bindInvoiceTypePickerChange (e) { // 发票类型
      this.data.invoiceRemark = '';
      this.selectInvoice = true;
      this.data.invoiceType = this.invoiceArray[e.target.value].type;
      this.invoiceIndex = e.target.value;
    },
    switchChange (e) {
      this.data.invoiceRemark = '';
      if (!e.target.value) {
        this.data.invoiceType = 0;
        this.selectInvoice = false;
      }
      // this.data.invoiceType = this.invoiceArray[e.target.value].type;
      this.data.isNeedInvoice = e.target.value;
    },
  },
}
</script>

<style lang="scss" scoped>
  .withdraw_view {
    .rate-info {
      text-align: center;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      color: #999999;
      .rate-fee {
        font-weight: bold;
        color: #C2AC78;
      }
    }
    .tipModal { 
      .tip-title {
        height: 70rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        border-bottom: 2rpx solid #E1E1E1;
      }
      .tip-content {
        margin: 40rpx 0 20rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 36rpx;
        .tip {
          &:last-child {
            margin-top: 30rpx;
          }
        }
      }
      .footer {
        height: 98rpx;
        display: flex;
        align-items: flex-end;
        button {
          width: 460rpx;
          height: 60rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
        }
        .confirm-btn {
          color: #F6DA99;
          background-color: #434343;
          border-radius: 12rpx;
        }
      }
    }
    .noticeModal {
      // width: 500rpx;
      // padding: 366rpx 124rpx;
      .notice-title {
        height: 70rpx;
        // line-height: 90rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        border-bottom: 2rpx solid #E1E1E1;
        // line-height:20px;
      }
      .notice-content {
        margin-top: 18rpx;
        .notice-content-account {
          display: flex;
          height: 50rpx;
          // justify-content: center;
          align-items: center;
          margin-bottom: 10rpx;
          .label {
            text-align: right;
            flex: 1;
            
            font-size: 22rpx;
            font-family:PingFang SC;
            font-weight:500;
          }
          .account {
            padding-left: 26rpx;
            width: 350rpx;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 22rpx;
            color: #666666;
            background: #FAFAFA;
            border-radius: 10rpx;
          }
        }
        .tip {
          margin-top: 8rpx;
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: right;
        }
        .other-tip {
          margin-top: 22rpx;
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 36rpx;
        }
      }
      .footer {
        height: 98rpx;
        display: flex;
        align-items: flex-end;
        button {
          width: 180rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
        }
        .paltform-btn {
          color: #434343;
          background-color: #F6DA99;
          border-radius: 12rpx;
        }
        .invoice-btn {
          width: 260rpx;
          color: #F6DA99;
          background-color: #434343;
          border-radius:12rpx;
        }
      }
    }
    .pick-value-select {
      font-family:PingFang SC;
      font-size: 28rpx;
      color: #000000;
      margin-right: 76rpx;
      text-align: right;
    }
    .bank_select_wrap {
      display: flex;
      align-items: center;
      .card_img {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
    }
    .pick-value {
      width: 100%;
      margin-right: 76rpx;
      text-align: right;
      font-family:PingFang SC;
      color: #999999;
      font-size: 24rpx;
    }
    .tip-info {
      margin-top: 52rpx;
      font-size: 24rpx;
      padding: 0 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #999999;
      line-height: 36rpx;
    }
    .input-placeholder {
      font-size: 24rpx;
      color: #999999;
    }
    .postal-number {
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-size: 30rpx;
      color: #000000;
      // margin-right: 41px;
      padding: 20rpx 28rpx 128rpx 28rpx;
      height: 60rpx;
      .label {
        
      }
      input {
        flex: 1;
        background-color: #FFFFFF;
      }
    }
  }
  /* 弹出层 */
  .popupF{
    // height: 800rpx;
    background:#FFF;
  }
  .popupTitle{
    margin:0 auto;
    height: 89rpx;
    line-height: 89rpx;
    text-align: center;
    font-size:30rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    border-bottom:2rpx solid #E1E1E1;
  }
  .popupTips{
    text-indent: 40rpx;
    margin:18rpx auto;
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(153,153,153,1);
  }
  .popupImage image{
    width: 60rpx;
    height: 60rpx;
    margin-top:36rpx;
  }
  .popupImage{
    width:196rpx;
    height:196rpx;
    background:rgba(250,250,250,1);
    border-radius:10rpx;
    margin:10rpx;
    float:left;
    text-align: center;
  }
  .popupImage view{
    width: 141rpx;
    font-size:24rpx;
    margin:0 auto;
    font-family:PingFang SC;
    font-weight:300;
    color:rgba(51,51,51,1);
  }
  .popupContent{
    width: 440rpx;
    margin-left:50rpx;
    margin-top:30rpx;
    overflow: hidden;
  }
  .popupComBtn {
    height:60rpx;
    line-height: 60rpx;
    border-radius:12rpx;
    margin:60rpx auto 0;
    text-align: center;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:bold;
  }
  .popupFoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .popupBtn{
    width:337rpx;
    background:rgba(67,67,67,1);
    color:rgba(246,218,153,1);
  }
  .popupPass {
    width: 180rpx;
    background: #F6DA99;
    color: #434343;
  }
  /* 下面的button按钮 */
  .uni-common-mt button {
    // width: 698rpx;
    width: 45%;
    height: 70rpx; 
    font-size:30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    margin:21rpx auto;
  }
  .othner-btn {
    background-color: #F6DA99;
    color: #434343;
  }
  
  .withdrawBtn {
    background: #434343;
    color: #F6DA99;
  }
  .uni-common-mt{
    width: 100%;
    position:fixed;
    bottom:0;
    height: 112rpx;
    border-top:2rpx solid #E1E1E1;
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
  }
  .header{
    width: 100%;
    height: 403rpx;
    background:#fff;
    overflow: hidden;
  }
  .assets{
    width: 687rpx;
    height: 160rpx;
    background:#434343;
    color:#F6DA99;
    margin:30rpx auto;
    border-radius:10rpx;
  }
  .assetsTitle{
    font-size:36rpx;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:36rpx;
    padding:28rpx 0 0 28rpx;
    
  }
  .assetsMoney{
    margin-left:27rpx;
    margin-top:34rpx;
    font-size:28rpx;
    font-family:PingFang SC;
  }
  .withdrawal{
    margin:110rpx 0 30rpx 43rpx;
    overflow: hidden;
  }
  .withdrawal input{
    font-size:42rpx;
    font-family:PingFang SC;
    float:left;
    // width:300rpx;
    height:40rpx;
  }
  .withdrawal text{
    float:right;
    font-size:24rpx;
    font-family:PingFang SC;
    color:rgba(255,115,116,1);
    margin:20rpx 30rpx 0 0;
  }
  .place {
    color:#E1E1E1;
  }
  .line{
    margin:0 auto;
    width:688rpx;
    height:2rpx;
    background:rgba(225,225,225,1);
  }
  /* 三角形 */
  .arrow {
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 18rpx;
    width: 18rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }
  .content{
    width: 100%;
    height: 900rpx;
    background: #FFF;
    margin-top:20rpx;
  }
  .addBankCard{
    width: 687rpx;
    margin:0 auto;
    height: 89rpx;
    line-height: 89rpx;
    position:relative;
    .select-bank-wrap {
      display: flex;
      justify-content: space-between;
    }
  }
  .bankCard{
    font-size:28rpx;
    font-family:PingFang SC;
    color:rgba(0,0,0,1);
    position:absolute;
    left:0;
    top:0;
  }
  .uni-input{
    font-size:26rpx;
    font-family:PingFang SC;
    color:rgba(51,51,51,1);
    position:absolute;
    right:45rpx;
    top:2rpx;
    
  }
  .addBankCard .arrow{
    position:absolute;
    top:35rpx;
    right:20rpx;
  }
  .drawDill{
    width: 687rpx;
    margin:0 auto;
    height: 89rpx;
    line-height: 89rpx;
  }
  .drawDill text{
   font-size:28rpx;
   font-family:PingFang SC;
   color:rgba(0,0,0,1); 
  }
   switch{
    float:right;
  }
  #switch{
    float:right;
    font-size:28rpx;
    font-family:PingFang SC;
    color:rgba(0,0,0,1);
    margin-right:20rpx;
    margin-top:4rpx;
  }
  .paperElectronics{
    width: 687rpx;
    // height: 230rpx;
    background:#FAFAFA;
    margin: 20rpx auto 0;
    position:relative;
  }
  .paperTitle{
    font-size:28rpx;
    font-family:PingFang SC;
    color:rgba(0,0,0,1);
    padding:21rpx 0 0 26rpx;
  }
  .paperAddress{
    margin: 10rpx 0 0 30rpx;
    font-size:24rpx;
    font-family:PingFang SC;
    color:rgba(153,153,153,1);
    line-height: 46rpx;
    .invoice-title_wrap {
      margin-left: 20rpx;
      .label {
        width: 160rpx;
        display: inline-block;
      }
    }
  }
  .logistics{
    width: 439rpx;
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    font-size:24rpx;
    font-family:PingFang SC;
    text-decoration:underline;
    color:rgba(153,153,153,1);
    box-shadow: 1px 1px 3px 2px #ccc;
    background:#FAFAFA;
    position:absolute;
    top:205rpx;
    left:124rpx;
  }
  .email{
    margin:0rpx 0 0 20rpx;
    font-size:24rpx;
    font-family:PingFang SC;
    color:rgba(153,153,153,1);
    display: inline-block;
  }
  .sendEmail{
    font-size:24rpx;
    font-family:PingFang SC;
    text-decoration:underline;
    margin:43rpx 0 0 115rpx;
    display: inline-block;
    color:rgba(194,172,120,1)
  }
  .service{
    width: 687rpx;
    margin:0 auto;
    height: 62rpx;
    line-height: 62rpx;
    font-size:22rpx;
    font-family:PingFang SC;
    color:rgba(102,102,102,1);
    position:relative;
  }
  .service>text{
  position:absolute;
  right:0rpx;
  }
  .popupTime {
    font-size: 26rpx;
    color: #333333;
    margin-top: 34rpx;
    font-weight: bold;
    text {
      color: #FF7473;
      font-size: 40rpx;
    }
  }
</style>
